<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>风险列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
      }
      
      .lists {
        padding: 20px;
      }
      
      .lists li {
        margin-bottom: 10px;
      }
      
      .lists li:last-child {
        margin: 0;
      }
      
      .lists li .left_name {
        color: #9098AB;
        white-space: nowrap;
      }
      
      .lists li .right_name {
        color: #333333;
        float: right;
      }
      
      .btntxt {
        width: 100%;
        text-align: right;
        font-size: 14px;
        padding-right: 20px;
        color: #3188FE;
      }
      
      .mui-navigate-right:after,
      .mui-push-right:after {
        right: 15px;
        color: #999999;
        font-size: 18px;
      }
      
      .tag {
        display: inline-block;
        width: 55px;
        height: 20px;
        line-height: 20px;
        transform: skewX(-15deg);
        text-align: center;
        color: #FFFFFF;
      }
      
      .mui-navigate-right:after {
        right: 0;
      }
      
      .screens {
        position: absolute;
        top: 44px;
        left: 0;
        width: 100%;
        min-height: 200px;
        background-color: #fff;
        z-index: 999;
        border-radius: 0;
      }
      
      .square-item {
        width: 30px;
        height: 30px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        margin-right: 15px;
       background: #F5F6F7;
        color: #333;
      }
      .square-item.bg-blue{
        color: #FFFFFF;
        background: #3188FE;
      }
      
      .square-item img {
        width: 15px;
        height: 15px;
      }
      
      .tips {
        text-align: center;
        font-weight: bold;
        line-height: 40px;
        font-size: 18px;
        border-bottom: 1px solid #DCDCDC;
      }
      
      .option {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
      
      .option button {
        width: 80px;
      }
      
      .tips-list {
        margin-top: 30%;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">风险列表</h1>
        <!--<a class="mui-pull-right mui-bar-right" @click="screen">
          <img src="../img/screen.png" width="18" style="margin-right: 3px;" />
          <span> 筛选</span>
        </a>-->
      </header>
      <div id="refreshContainer" class="mui-scroll-wrapper mui-content">
        <div class="mui-scroll">
          <div>
            <ul class="mui-table-view">
              <li class="mui-table-view-cell mui-collapse" v-for="(item,index) in list"
                :key="item.deviceId" v-cloak>
                <a class="mui-navigate-right" href="#">{{item.deviceName}}</a>
            
                <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                  <div class="mui-card card_content" v-if="item.taskWps.length > 0"
                    v-for="(item_a,a) in item.taskWps" :key="item_a.id" v-cloak style="margin-right:10px;">
                    <!--页眉，放置标题-->
                     <div class="mui-card-header" @tap="toDetail(item_a,a)">
                       <span class="txt_l">
                         <span class="indexs">{{a + 1}}</span>
                            质量风险：{{item_a.riskNode}}
                         </span>
                         <span class="m_r mui-navigate-right">
                           <span class="marks" :class="status(item_a.status,0)">{{status(item_a.status,1)}}</span>
                         </span>
                     </div>
                     <div class="mui-card-content">
                       <ul class="mui-table-view lists">
                         
                         <li class="lis">
                           <span class="left_name">风险措施：</span>
                           <span class="right_name">{{item_a.jobProject}}</span>
                         </li>
                       </ul>
                     </div>
                  </div>
                  <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
                    <li v-for="(b,i) in item.childs" :key="b.deviceId" class="mui-table-view-cell">
                      <a v-if="b.taskWps.length > 0" class="mui-navigate-right" href="#">{{b.parentName}}/{{b.deviceName}}</a>
                      <div class="mui-collapse-content" style="padding:0;background-color: #efeff4;">
                        <div class="mui-card card_content" v-for="(item_b,b) in b.taskWps" :key="item_b.id" v-cloak style="margin-right:10px;">
                          <!--页眉，放置标题-->
                           <div class="mui-card-header" @tap="toDetail(item_b,b)">
                             
                             <span class="txt_l">
                               <span class="indexs">{{b + 1}}</span>
                                  质量风险：{{item_b.riskNode}}
                               </span>
                               <span class="m_r mui-navigate-right">
                                 <span class="marks" :class="status(item_b.status,0)">{{status(item_b.status,1)}}</span>
                               </span>
                                
                           </div>
                           <div class="mui-card-content">
                             <ul class="mui-table-view lists">
                               
                               <li class="lis">
                                 <span class="left_name">风险措施：</span>
                                 <span class="right_name">{{item_b.jobProject}}</span>
                               </li>
                             </ul>
                           </div>
                        </div>
                        <ul class="mui-table-view mui-table-view-chevron" style="margin-top: 0;">
                          <li v-for="(c,i) in b.childs" :key="c.deviceId" class="mui-table-view-cell">
                            <a v-if="c.taskWps.length > 0" class="mui-navigate-right" href="#">{{c.parentName}}/{{c.deviceName}}</a>
                            <div class="mui-collapse-content" style="padding:0;background-color: #efeff4; width: 100%;">
                              <div class="mui-card card_content" v-for="(item_c,c) in c.taskWps" :key="item.id" v-cloak style="margin-right:10px;">
                                <!--页眉，放置标题-->
                                 <div class="mui-card-header" @tap="toDetail(item_c,c)">
                                   <span class="txt_l">
                                     <span class="indexs">{{c + 1}}</span>
                                        质量风险：{{item_c.riskNode}}
                                     </span>
                                     <span class="m_r mui-navigate-right">
                                       <span class="marks" :class="status(item_c.status,0)">{{status(item_c.status,1)}}</span>
                                     </span>
                                      
                                 </div>
                                 <div class="mui-card-content">
                                   <ul class="mui-table-view lists">
                                     
                                     <li class="lis">
                                       <span class="left_name">风险措施：</span>
                                       <span class="right_name">{{item_c.jobProject}}</span>
                                     </li>
                                   </ul>
                                 </div>
                              </div>
                            </div>
                          </li>
            
                        </ul>
            
                      </div>
                    </li>
            
                  </ul>
                </div>
              </li>
            </ul>
            <!-- <div class="mui-card card_content" v-for="(item, i) in sliderListShow" :key="item.id" @tap="toDetail(item, item.index)" v-cloak>
              <div class="mui-card-content">
                <ul class="mui-table-view lists">
                  <li class="lis flex justify-between" style="position: relative;">
                    
                    <span>质量风险：{{item.riskNode}}</span>
                    <span :class=" ['mui-navigate-right padding-right', status(item.status,0)]">{{status(item.status,1)}}</span>
                  </li>
                  <div class="lis border-top" style="padding-bottom: 10px;"></div>
                  <li class="lis color-999 text-sm">
                    <span>措施：{{item.jobProject}}</span>
                  </li>
                </ul>
              </div>
            </div> -->
          </div>

        </div>
      </div>
      <div class="screens mui-popover mui-popover-top">
        <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary" style="background-color: #fff;border-bottom: 1px solid #DCDCDC;">
          <a class="mui-control-item mui-active" @tap="sliderIndex=0"><span class="txt">全部</span></a>
          <a class="mui-control-item" @tap="sliderIndex=1"><span class="txt">已验收</span></a>
          <a class="mui-control-item" @tap="sliderIndex=2"><span class="txt">未验收</span></a>
        </div>
        <div class="content_ul">
          <div class="flex flex-wrap padding border-bottom" style="padding-right: 0;margin-right: -15px;min-height: 96px;">
            <div :class="['square-item',  item.status == 4? 'bg-blue': '']" v-for="(item, i) in sliderList" :key="i"  @tap="toDetail(item, item.index)">
              <img src="../img/gongzuopiao_duigou.png" v-if="item.status == 4" />
              <span v-else>{{item.index + 1}}</span>
            </div>
          </div>
          <div class="padding flex justify-around">
            <button type="button" class="mui-btn flex-sub margin-right" @tap="screen">关闭</button>
            <!-- <button type="button" class="mui-btn flex-sub mui-btn-primary" @tap="getScreen">确定</button> -->
          </div>
        </div>
      </div>
    </div>

    <script src="../../../js/mui.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/indexDBs.js"></script>
    <script type="text/javascript">
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              vm.form.page = 1;
              vm.getList();
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
            }
          },
          //        up: { //上拉加载
          //          height: 50, //可选.默认50.触发上拉加载拖动距离
          //          auto: false, //可选,默认false.自动上拉加载一次
          //          contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
          //          contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
          //          callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
          //            vm.getList();
          //          }
          //        }
        }
      })
      let lineType =null;
      let db={};
      const dbName = 'myDBcheck'; //数据库
      const storeName = 'verifyList'; //仓库名
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

     async function plusready() {
        var self = plus.webview.currentWebview();
        vm.projectTaskId = self.projectTaskId
        vm.claimed = self.claimed
        lineType = getSysInfo();
        // 打开数据库 const dbName = 'myDB', storeName = 'processPackage'
        await openDB(dbName, storeName, 1).then(res=>{
          console.log('openDB',res) 
          db=res;
        })
        //获取离线数据
        if(!lineType){
          getLineData()
          return
        }
        vm.getList()
      }

      let vm = new Vue({
        el: "#container",
        data: {
          form: {},
          projectTaskId: 3,
          list: [],
          screenList: [],
          isShowMes: false,
          sliderIndex: 0,
          sliderListShow: [],
          claimed: 0 // 任务领取状态 0 未被领取 1 自己领取 2 他人领取
        },
        computed:{
          sliderList() {
            return this.list.filter(item => {
              if(this.sliderIndex == 0) {
                return true
              } else if(this.sliderIndex == 1 && item.status ==4) {//以颜色
                return true
              } else if(this.sliderIndex == 2 && item.status !=4) {//未验收
                return true
              } else {
                return false
              }
            })
          }
        },
        created: function() {},
        methods: {
          getList() {
            plus.nativeUI.showWaiting('加载中')
            mui.baseApp.httpRequst('get', '/app/api/project/execution/sensitive/' + this.projectTaskId + "/5", {}, (res) => {
              plus.nativeUI.closeWaiting()

              this.list = res.data.map((item, index) => {
                return {
                  index,
                  ...item
                }
              })
              this.sliderListShow = JSON.parse(JSON.stringify(this.list))
              console.log(res.data)

            })
          },
          status(status, v) {
            if(v == 1) {
              if(status != 4) {
                return '未验收'
              } else {
                return '已验收'
              }
            } else {
              if(status != 4) {
                return 'color-orange'
              } else {
                return 'color-blue'
              }
            }

          },
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          toDetail(row, i) {
            let arr = []
            let currentIndex = 0 // 当前点击工序索引
            vm.list.forEach((a, i) => {
              arr = arr.concat(a.taskWps)
              a.childs.forEach((b, index) => {
                arr = arr.concat(b.taskWps)
                b.childs.forEach((c, index) => {
                  arr = arr.concat(c.taskWps)
                })
              })
            })
            let list = arr.map((wp, index) => {
              wp.index = index
              if (wp.id == row.id) {
                currentIndex = wp.index
              }
              return {
                index,
                status: wp.status,
                id: wp.id
              }
            })
            mui.baseApp.openWindow('./implement.html', {
              projectTaskSensitiveId: row.id,
              i: currentIndex,
              list,
              claimed: vm.claimed,
              dbId:vm.projectTaskId,
            })
          },
          screen() {
            mui('.screens').popover('toggle');
          },
          getScreen() {
            mui('.screens').popover('toggle');
            this.sliderListShow = JSON.parse(JSON.stringify(this.sliderList))
          },
          close() {
            this.isShowMes = false
          }
        },
      })
      //获取离线数据
      function getLineData(){
        getDataByKey(db, storeName,vm.projectTaskId).then(res=>{
           plus.nativeUI.closeWaiting(); 
          console.log('获取离线数据',res)
           vm.projectList = res.sensitiveList
           // vm.aList=[...vm.projectList]
            vm.list = vm.projectList.map((item, index) => {
              return {
                index,
                ...item
              }
            })
            vm.sliderListShow = JSON.parse(JSON.stringify(vm.list))
        })
      }
      function getSysInfo() {
          types = {};
          types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
          types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
          types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
          types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
          types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
          types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
       
          var str = types[plus.networkinfo.getCurrentType()];
          if (str == '未知' || str == '未连接网络') {
              return false;
          } else {
              return true;
          }
       
      }
      window.addEventListener('back', function(event) {
        let data = event.detail
        lineType = getSysInfo()
         if(!lineType){
           getLineData()
           return
         }
        vm.getList()
      });
    </script>
  </body>

</html>